<template>
  <div class="home-root">
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-loading
            class="loading"
            color="#1989fa"
            type="spinner"
            size="24px"
            vertical
            >登录中...</van-loading
          >
        </div>
      </div>
    </van-overlay>
    <!-- <router-view /> -->
    <keep-alive>
      <router-view v-if="isKeepAlive"></router-view>
      <!--这里是会被缓存的组件-->
    </keep-alive>
    <router-view v-if="!isKeepAlive"></router-view>
    <!-- 垫脚 -->
    <div v-if="isShow" class="dianjiaobox"></div>
    <!-- 底部 -->
    <van-tabbar v-if="isShow" v-model="active" route active-color="#49a9ee">
      <van-tabbar-item v-if="perShow1" name="home" to="/home" icon="home-o">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon1.active : icon1.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item v-if="perShow2"  name="work" to="/work" icon="search">
        <span>企业走访</span>
        <template #icon="props">
          <img :src="props.active ? icon2.active : icon2.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item v-if="perShow3" name="friends" to="/query" icon="friends-o">
        <span>查询服务</span>
        <template #icon="props">
          <img :src="props.active ? icon3.active : icon3.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item v-if="perShow4" name="setting" to="/analys" icon="setting-o">
        <span>统计分析</span>
        <template #icon="props">
          <img :src="props.active ? icon4.active : icon4.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import * as dd from "dingtalk-jsapi"; // 此方式为整体加载，也可按需进行加载
export default {
  data() {
    return {
      userCode: "",
      res: "",
      active: "home",
      icon1: {
        active: require("@/assets/img/home-active.png"),
        inactive: require("@/assets/img/home.png"),
      },
      icon2: {
        active: require("@/assets/img/visit-active.png"),
        inactive: require("@/assets/img/visit.png"),
      },
      icon3: {
        active: require("@/assets/img/search-active.png"),
        inactive: require("@/assets/img/search.png"),
      },
      icon4: {
        active: require("@/assets/img/analys-active.png"),
        inactive: require("@/assets/img/analys.png"),
      },
      show: true,
      window:window,
      perShow1:false,
      perShow2:false,
      perShow3:false,
      perShow4:false,
      queryData:{},
      // 是否为钉钉登录
      isDD:false,
    };
  },
  created() {
    var self = this;
    if(this.isDD){
      // dd登录
      dd.ready(function () {
        dd.runtime.permission.requestAuthCode({
          corpId: self.$route.query.corpId, // 企业id
          // corpId: 'ding3fba08239f374af0f2c783f7214b6d69', // 企业id
          onSuccess: function (info) {
            // alert("dd error info: " + info);
            // alert("dd error code: " + info.code);
            // 通过该免登授权码可以获取用户身份
            self.$api.ddLogin({ code: info.code }).then((res) => {
              self.res = res.data.data;
              if (res.data.isSuccess) {
                sessionStorage.setItem("token", res.data.data.token);
                sessionStorage.setItem("userData", JSON.stringify(res.data.data));
                let user = res.data.data
                self.$api
                  .user({ method: "post", type: "getAllUserMessage" }, { id: user.id })
                  .then(function (userInfo) {
                    if (userInfo.data.data) {
                      let data = userInfo.data.data["权限"];
                      let permiss = [];
                      for (var i = 0, l = data.length; i < l; i++) {
                        permiss.push(data[i].name);
                      }
                      user.permiss = permiss;
                      sessionStorage.setItem("user", JSON.stringify(user));
                      self.$hasPermiss(['钉钉首页','钉钉企业走访底部','钉钉查询服务','钉钉统计分析'],['perShow1','perShow2','perShow3','perShow4'])
                      // 获取能够访问的园区权限
                      if(user.roleNames.indexOf("领导")>-1){
                        self.queryData.parkIds=''
                        sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                      }else if(user.roleNames.indexOf("网格")>-1){
                        self.queryData.dataCheck='true'
                        self.$api.gridMember({method:"post",type:"datagrid"},{userId:user.id}).then(res=>{
                          if(res.data.data){
                            self.queryData.parkIds=res.data.data[0]&&res.data.data[0].parkIds||'无'
                          }
                            sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                        })
                      }else if(user.roleNames.indexOf("园区")>-1){
                        self.queryData.dataCheck_code='true'
                        if(user.firstOrganizationCode){
                          self.queryData.basicInforCode=user.firstOrganizationCode
                        }
                        sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                      }else{
                        self.queryData.dataCheck='true'
                        sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                      }
                    }
                  });
                self.$store.state.ddReady = true
                self.show = false;
                self.$api
                  .ddjq({ url: "https://wuc.irunway.cn/appProject/" })
                  .then((res) => {
                    dd.config({
                      agentId: res.data.AgentId, // 必填，微应用ID
                      corpId: res.data.corpId, //必填，企业ID
                      timeStamp: res.data.timeStamp, // 必填，生成签名的时间戳
                      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                      signature: res.data.signature, // 必填，签名
                      jsApiList: [
                        "device.geolocation.get",
                        "device.geolocation.start",
                        "device.geolocation.stop",
                      ], // 必填，需要使用的jsapi列表，注意：不要带dd。
                    });
                  });
              } else {
                self.show = false;
                self.$router.push("/emptyPage");
              }
            });
          },
          onFail: function (err) {
            // if(JSON.stringify(err)=="No value for corpId"){
            //   alert("请退出重新登录！")
            // }
            alert("请退出重新登录！");
          },
        });
      });
    }else{
      // 普通登录
      self.$api.login({ username: "hcq", password: "a123456" }).then((res) => {
        console.log("res", res);
        if (res.data.isSuccess) {
          sessionStorage.setItem("token", res.data.data.token);
          sessionStorage.setItem("userData", JSON.stringify(res.data.data));
          let user = res.data.data
          self.$api
            .user({ method: "post", type: "getAllUserMessage" }, { id: user.id })
            .then(function (userInfo) {
              if (userInfo.data.data) {
                let data = userInfo.data.data["权限"];
                let permiss = [];
                for (var i = 0, l = data.length; i < l; i++) {
                  permiss.push(data[i].name);
                }
                user.permiss = permiss;
                sessionStorage.setItem("user", JSON.stringify(user));
                self.$hasPermiss(['钉钉首页','钉钉企业走访底部','钉钉查询服务','钉钉统计分析'],['perShow1','perShow2','perShow3','perShow4'])
                // 获取能够访问的园区权限
                if(user.roleNames.indexOf("领导")>-1){
                  self.queryData.parkIds=''
                  sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                }else if(user.roleNames.indexOf("网格")>-1){
                  self.queryData.dataCheck='true'
                  self.$api.gridMember({method:"post",type:"datagrid"},{userId:user.id}).then(res=>{
                    if(res.data.data){
                      self.queryData.parkIds=res.data.data[0]&&res.data.data[0].parkIds||'无'
                    }
                      sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                  })
                }else if(user.roleNames.indexOf("园区")>-1){
                  self.queryData.dataCheck_code='true'
                  if(user.firstOrganizationCode){
                    self.queryData.basicInforCode=user.firstOrganizationCode
                  }
                  sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                }else{
                  self.queryData.dataCheck='true'
                  sessionStorage.setItem("queryData", JSON.stringify(self.queryData));
                }
              }
            });
          self.$store.state.ddReady = true;
          self.show = false;
        } else {
          self.show = false;
          self.$router.push("/emptyPage");
        }
      });
    }

  },
  methods: {},
  computed: {
    isShow() {
      return (
        this.$route.path === "/home" ||
        this.$route.path === "/work" ||
        this.$route.path === "/query" ||
        this.$route.path === "/analys"
      );
    },
    isKeepAlive() {
      return this.$route.meta.keepAlive;
    },
  },
};
</script>

<style lang="less">
.dianjiaobox {
  height: 50px;
}
body {
  background: #f7f8fa;
}
.van-overlay {
  z-index: 100;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #fff;
}

.block {
  position: relative;
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
